<!--
 * @Author: HaiF
 * @Date: 2020-11-30 21:46:03
 * @LastEditTime: 2021-04-21 17:22:43
 * @LastEditors: Please set LastEditors
 * @Description: 角色管理主页面
 * @FilePath: \adminPC\src\views\role\index.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->

<template>
  <div class="wrapper">
    <!-- <el-row class="queryBox">
      <el-col :span="24" class="textRight">
        <el-button
          v-if="$_permisson('/core/role/add')"
          icon="el-icon-plus"
          circle
          title="新建"
          @click="showCreate"
        />
      </el-col>
    </el-row> -->
    <JTable :table-list="tableList" :config="tableConfig">
      <template slot="Actions" slot-scope="{row}">
        <el-button type="text" @click="handleActive(row,'more')"> 详情 </el-button>
        <el-button v-if="$_permisson('/core/role/roleFunction')" type="text" @click="handleActive(row,'roleMenu')">
          角色权限
        </el-button>
        <el-button v-if="$_permisson('/core/role/add')" type="text" @click="handleActive(row,'children')">
          创建子级
        </el-button>
        <el-button v-if="$_permisson('/core/role/update')" type="text" @click="handleActive(row,'edit')">
          修改
        </el-button>
        <el-button v-if="$_permisson('/core/role/deleteStatus')" type="text" @click="handleActive(row,'del')">
          删除
        </el-button>
      </template>
    </JTable>

    <el-dialog :before-close="hiddenDialog" :title="dialog.title[dialog.active]" :visible.sync="dialog.dialogVisible" :destroy-on-close="true">
      <createdWidget v-if="dialog.active!=='roleMenu'" :emit-data="emitData" :read="dialog.active==='more'" @handleBoxEvent="handleDialog" />
      <rolePower v-if="dialog.active=='roleMenu'" :role-id="currentId" @handleRole="handleRole" />
    </el-dialog>
  </div>
</template>

<script>
// TODO: 查询条件过滤
import pageBtn from '@/views/mixin/pageBtn'
import createdWidget from './widget/created'
import rolePower from './widget/rolePower'
import JTable from '@/components/JTable'

import { getList, createItem, updateItem, removeItem, addFunction } from '@/api/role'
// import { getListByRole } from '@/api/dataPower'
// import { getRoleByRole } from '@/api/menus'
export default {
  components: {
    JTable,
    createdWidget,
    rolePower
  },
  mixins: [pageBtn],
  props: {},
  data() {
    const listQuery = {
      total: 0,
      page: 1,
      size: 10,
      handleFilter: this.fetchData
    }
    const dialog = {
      dialogVisible: false,
      title: { created: '创建角色', edit: '修改角色', roleMenu: '角色赋权', more: '查看详情' },
      active: ''
    }
    return {
      listQuery,
      dialog,
      listLoading: false,
      dataList: [],
      currentItem: {},
      tableConfig: {
        listLoading: this.listLoading,
        pagination: listQuery,
        tableAttribute: {
          'row-key': 'id',
          'tree-props': { children: 'children', hasChildren: 'unhasChildren' }
        },
        thead: [
          {
            type: 'selection'
          },
          {
            type: 'index',
            label: '-',
            start: 1
          },
          {
            prop: 'name',
            label: '名称'
            // type: 'link',
            // options: {
            //   callback: (row) => {
            //     this.handleActive(row, 'edit')
            //   },
            //   type: 'primary'
            // }
          },
          {
            prop: 'alias',
            label: 'Code'
          },
          {
            prop: 'isSysRoleStr',
            label: '系统角色'
          },
          {
            prop: 'remark',
            label: '备注'
          },
          // {
          //   prop: 'tenantCode',
          //   label: '租户编码'
          // },
          {
            prop: '',
            label: 'Actions',
            type: 'actions',
            width: '250',
            align: 'center',
            slot: true
          }
        ],
        search: ['alias', 'iconUrl', 'isSysRole', 'id', 'name', 'parentId', 'remark', 'tenantCode'],
        activeBox: {
          btnRules: { created: '/core/role/add', rulesFuntion: this.$_permisson }, // 按btn个数重左向右
          bindDefaultEvent: this.showCreate
        }
      },
      currentId: '',
      emitData: {}
    }
  },
  computed: {
    tableList() {
      const origin = this.dataList

      return origin
    }
  },
  watch: {},
  created() {
    this.fetchData()
  },
  mounted() {},
  methods: {
    fetchData(args = {}) {
      const { ...param } = args
      this.listLoading = true
      getList(param).then(res => {
        const { /* code, */ data } = res
        this.dataList = data
        this.listQuery.total = data.length
        this.listLoading = false
      })
    },
    handleActive(row, target) {
      const { id } = row
      this.currentId = id

      if (target === 'del') {
        this.removeItem(id)
        return
      }

      if (['edit', 'more'].includes(target)) {
        this.emitData = row
        const openTarget = target
        this.showDialog(openTarget)
      }

      if (target === 'children') {
        this.showCreate()
      }

      if (target === 'roleMenu') {
        // this.findFunction(id)
        this.showDialog('roleMenu')
      }
    },
    handleRole(functionIds) {
      if (functionIds) {
        this.addFunction({ functionIds: functionIds.toString(), roleId: this.currentId })
      }
      this.hiddenDialog()
    },
    addFunction(params) {
      addFunction(params).then(res => {
        const { code, message } = res
        if (code === 200) {
          return this.$message({
            message,
            type: 'success'
          })
        }
        this.$message.error(message)
      })
    },
    showCreate() {
      const target = 'created'
      this.showDialog(target)
    },
    showDialog(target = 'created') {
      this.dialog.dialogVisible = true
      this.dialog.active = target
    },
    hiddenDialog() {
      this.dialog.dialogVisible = false
      this.currentId = null
      this.dialog.active = ''
      this.emitData = {}
    },

    handleDialog(emit) {
      const { target } = emit
      if (!target) {
        return this.hiddenDialog()
      }
      const currentActive = this.dialog.active
      if (currentActive === 'created') {
        this.createdItem(target)
      }
      if (currentActive === 'edit') {
        this.updateItem(target)
      }
      this.hiddenDialog()
    },

    createdItem(item) {
      if (this.currentId) {
        item.parentId = this.currentId
      }
      createItem(item).then(res => {
        const { code, message } = res
        if (code === 200) {
          this.fetchData()
          this.$message({
            message,
            type: 'success'
          })
          return
        }
        this.$message.error(message)
      })
    },

    updateItem(item) {
      const params = { ...this.emitData, ...item }
      updateItem(params).then(res => {
        const { code, message } = res
        if (code === 200) {
          this.fetchData()
          this.$message({
            message,
            type: 'success'
          })
          return
        }
        this.$message.error(message)
      })
    },

    removeItem(id) {
      this.$confirm('确认删除').then(res => {
        removeItem(id).then(res => {
          const { code, message } = res
          if (code === 200) {
            this.$message({
              message,
              type: 'success'
            })
            this.fetchData()
            return
          }
          this.$message.error(message)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 0px;
   margin: 0px;
}
</style>
